/**
 *行政区划通用组件
 */
<template>
    <el-cascader
        v-model="cascaderVal"
        :props="props"
        show-all-levels
        clearable
        :disabled="disabled"
        separator="/"
        :placeholder="`请选择行政区划`"
        class="my-cascader"
        @change="cascaderChange"
    />
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, computed, watch  } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { getCityOptionApi } from '@/apis'
    import { isPhone } from '@/utils'

    import { useRoute, useRouter } from 'vue-router'
    import { storeToRefs } from 'pinia'
    import { useStore } from '@/store'
    import { ElMessage } from 'element-plus'
    import {
        Lock,
        User,
        Monitor,
        Phone,
        Search,
        RefreshRight,
        CaretTop,
        CaretBottom,
    } from '@element-plus/icons-vue'
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    
    const cascaderVal: Ref<any[]> = ref([])
    
    const { disabled = false } = defineProps<{
        disabled?: boolean, 
    }>()
    const defaultValue = defineModel<any>({
        required: false,
        default: ''
    })
    const orgName = defineModel<any>('orgName', {
        required: false,
        default: ''
    })
    const district = defineModel<any>('district', {
        required: false,
        default: ''
    })
    const townStreet = defineModel<any>('townStreet', {
        required: false,
        default: ''
    })
    const village = defineModel<any>('village', {
        required: false,
        default: ''
    })
    
    watch(defaultValue, (nval: any, oval) => {
        // console.log(nval instanceof Array)
        // 判断是不是数组
        if (nval instanceof Array) {
            cascaderVal.value = nval
        } else if (typeof nval == 'string') {
            if (nval) {
                cascaderVal.value = nval?.split(',')
            } else {
                cascaderVal.value = []
            }
        }
    }, {
        immediate: true,
    })

    const props: Raw<any> = markRaw({ 
        lazy: true,
        checkStrictly: true,
        lazyLoad(node, resolve) {
            const { level } = node // 获取当前node对象中的level属性
            let pId = "0"
            if (level > 0) {
                let value = node.value;
                // console.log(value)
                if (value) {
                    let values = value.split("#")
                    pId = values.length > 1 ? values[1] : "0";
                }
            }
            getCityOptionApi({
                pId: pId
            }).then((res: any) => {
                const nodes = res.data;
                nodes.forEach(item => {
                    item.value = item.name + "#" + item.code;
                    item.label = item.name;
                    item.leaf = level >= 2; //判断是否为末尾节点，这个地方是0,1,2三级
                })
                resolve(nodes);
            }).catch(err => {
                
            })
        },
    })
    // const emits = defineEmits<{
    //     // (e: 'update:isCollapse', data: boolean): void,
    //     'tabelSearch': [data: any]
    // }>()
    
    
    const cascaderChange = (val: any) => {
        // console.log(val)
        if (defaultValue.value instanceof Array) {
            defaultValue.value = val
        } else {
            // console.log(val)
            defaultValue.value = val.join(',')
            orgName.value = val.map((item: any, index: number) => {
                if (index == 0) {
                    district.value = item?.split('#')[0]
                } else if (index == 1) {
                    townStreet.value = item?.split('#')[0]
                } else if (index == 2) {
                    village.value = item?.split('#')[0]
                }
                return item?.split('#')[0]
            }).join('/')
        }
    }
    
   
</script>

<style lang="scss" scoped>
    // // 多级选项
    // :deep(.my-cascader) {
    //     box-sizing: border-box;
    //     width: 240px;
    // }
</style>